import React from "react";
// 正确使用状态的三个核心
// 1.不要直接修改状态
// 2.状态的更新可能是异步的
// 3.状态的更新会合并
class ComC extends React.Component{
    constructor(){
        super()
        this.state={
            name:"摸鱼欧阳锋"
        }
    }
    componentDidMount(){
        setTimeout(()=>{
            // 1.不要直接修改状态，视图不会响应
            // this.state.name = "搬山道人"
            // 2.状态的更新可能是异步的,放在定时器中可以正确的获取更新之后的状态，因为他们在同一个'tick'中
            this.setState({
                name:'搬山道人'
            })
            console.log(this.state);
            // 3.调用多个setState的时候，会合并成一个调用来提高性能，传递的对象也会合并到当前state中
            setTimeout(()=>{
                this.setState({
                    age:"30"
                })
                console.log(123);
            },2000)
            // 4.不要再render中调用setState；
            // 因为调用setState的时候，会触发render的调用，如果在render中调用setState会造成死循环
        })
    }
    render(){
        return(
            <fieldset>
                <legend>正确的使用状态</legend>
                <h1>{this.state.name}</h1>
                <h1>{this.state.age}</h1>
            </fieldset>
        )
    }

}

export default ComC